<template>
  <div>
    <Header_h />
    <div class="sq_box_content">
      <bannerInfo :info="info" />
    </div>
    <div class="new_box_bgcolor">
      <div class="new_box">
        <div class="container">
          <div class="s_flex s_align_items_start">
            <!-- <leftMenu :menu="menu" :check="active" @checkItem="checkItem" /> -->
            <div style="width: 100%">
              <div class="sq_xl">
                <section class="core_content_left core_content">
                  <div
                    class="item_list"
                    v-for="(item, index) in list.list"
                    :key="index"
                    @click="open(item)"
                  >
                    <div class="dynamic_box">
                      <img src="@/assets/web/dynamic.png" alt="" />
                      <div class="dynamic_box_info">
                        <!-- <h3 class="sq_tilte3 line_h_30">
                      <span class="sq_tilte2 ft_weight_800">{{item.month}}</span>月刊
                    </h3> -->
                        <h4 class="sq_tilte3 line_h_30">{{ item.title }}</h4>
                      </div>
                      <p class="year">{{ item.year }}</p>
                    </div>
                    <div class="dynamic_box_footer">
                      <div class="sq_sign_btn sq_content">了解更多</div>
                    </div>
                  </div>
                </section>
              </div>
              <div class="core_content_left core_content">
                <div
                  class="sq_xs item_list"
                  v-for="(item, index) in list.list"
                  :key="index"
                  @click="open(item)"
                >
                  <div class="dynamic_box">
                    <img src="@/assets/web/dynamic.png" alt="" />
                    <div class="dynamic_box_info">
                      <!-- <h3 class="sq_tilte3 line_h_30">
                      <span class="sq_tilte2 ft_weight_800">{{item.month}}</span>月刊
                    </h3> -->
                      <h4 class="sq_tilte3 line_h_30">{{ item.title }}</h4>
                    </div>
                    <p class="year">{{ item.year }}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="pagination">
            <el-pagination
              background
              small
              @current-change="handleCurrentChange"
              :current-page="list.page"
              :page-size="5"
              layout="total, prev, pager, next, jumper"
              :total="parseInt(list.count)"
              align="left"
              :pager-count="5"
            ></el-pagination>
          </div>
        </div>
      </div>
    </div>
    <Footer />
    <rightMenu @moveTo="moveTo" />
  </div>
</template>

<script>
import Header_h from "@/components/Header_h";
import Footer from "@/components/Footer";
import bannerInfo from "@/components/web/bannerInfo";
import leftMenu from "@/components/web/leftMenu";
import { dynamicList } from "@/api/web";
import rightMenu from "@/components/web/rightMenu";

export default {
  components: {
    Header_h,
    Footer,
    bannerInfo,
    leftMenu,
    rightMenu,
  },
  data() {
    return {
      list: [],
      banner: [],
      info: {
        title: "知识产权动态期刊",
        content: "最新的知识产权动态",
        img: require("@/assets/web/banner.png"),
      },
      check: -1,
      // active: 1,
      // menu: [
      //   {
      //     name: "中心介绍",
      //     path: "/web/services/introduce",
      //   },
      //   {
      //     name: "顺企动态",
      //     path: "/web/services/dynamic",
      //   },
      //   {
      //     name: "活动中心",
      //     path: "/web/services/central",
      //   },
      //   {
      //     name: "新闻资讯",
      //     path: "/web/news",
      //   },

      // ],
    };
  },
  mounted() {
    this.getList();
    // this.getBanner();
  },
  methods: {
    //点击第几页
    async handleCurrentChange(currentPage) {
      try {
        this.getList(currentPage);
      } catch (e) {
        this.$message.error(e.message);
      }
    },
    moveTo() {
      window.scrollTo(0, 0);
    },
    async getList(page = 1) {
      try {
        this.list = await dynamicList({
          page_size: 5,
          page,
        });
        // this.list={...this.list,count:12}
      } catch (error) {
        this.$message.error(error.message);
      }
    },
    goNews(id) {
      this.$router.push({ path: "/web/news/details", query: { id: id } });
    },
    webUrl(url) {
      window.open(url);
    },
    enter(index) {
      this.check = index;
    },
    leave() {
      this.check = -1;
    },
    checkItem(index) {
      this.active = index;
    },
    open(item) {
      window.open(item.file);
    },
  },
};
</script>

<style lang="less" scoped>
/* core_content */
.new_box {
  margin-top: -4%;
  position: relative;
  z-index: 1;
  margin-bottom: 60px;
}
.core_content .item_list_img {
  width: 100%;
  object-fit: cover;
  overflow: hidden;
  .img_wap {
    padding-bottom: 56%;
    width: 100%;
    position: relative;
    img {
      width: 100%;
      transition: all 0.5s ease;
      &:hover {
        transform: scale(1.1);
      }
    }
  }
}

.li_active {
  width: 100%;
  background: #ffffff;
  box-shadow: 0 0 16px rgba(24, 76, 171, 0.16);
  border: none;
}

.right_info {
  width: 70%;
  // margin-left: 25px;
}
.core_content {
  display: flex;
  flex-direction: row;
  // justify-content: space-evenly;
}
.core_content .item_list {
  // padding: 23px 15px;
  margin-right: 30px;
  width: 22%;
  margin-bottom: 30px;
  background: #ffffff;
  border: 1px solid #ced4ea;
  cursor: pointer;
  transition: all 0.2s ease;
  &:hover {
    box-shadow: 0px 0px 16px 0px rgba(24, 76, 171, 0.16);
  }
  img {
    width: 100%;
  }
  .dynamic_box {
    // 超过区间自动换行
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    word-wrap: break-word !important;
    white-space: pre-wrap !important;
    position: relative;
    .dynamic_box_info {
      color: #fff;
      position: absolute;
      top: 0;
      padding: 35px 30px 0;
    }
    .year {
      position: absolute;
      bottom: 0;
      font-size: 80px;
      font-weight: bold;
      color: #ffffff;
      opacity: 0.1;
      padding: 0 30px 0;
    }
  }
  .dynamic_box_footer {
    margin: 40px auto;
    text-align: center;
    div {
      text-align: center;
      margin: 0 auto;
    }
  }
}

.core_content .item_list:last-child {
  // margin-bottom: 0;
}

.content_spacing {
  margin: 10px auto;
}
.core_content_left {
  width: 100%;
  // margin-left: 250px;
  // background-color: #fff;
  height: 100%;
}
.core_content_right {
  width: 25%;
  background-color: #fff;
}
.content_right_spacing {
  margin: 10px 0;
}
.list_right {
  border-top: 1px solid #eee;
  padding: 10px 0;
  margin: 0 10px;
}
.right_title {
  margin: 0 10px;
  padding: 10px 0;
}

/* core_content */

@media (max-width: 750px) {
  .core_content .item_list_img {
    width: 100%;
    height: 127px;
    margin-right: 0;
    margin-bottom: 20px;
  }
  .core_content {
    flex-direction: column;
  }
  .core_content_left {
    width: 100%;
    height: 100%;
  }

  .core_content .item_list {
    width: 80%;
    margin: 20px auto;
    .dynamic_box {
      white-space: unset !important;
      .year {
        position: absolute;
        bottom: -7px;
      }
    }
  }
}
.pagination {
  width: 90%;
  margin: 40px auto 0;
}
</style>

